<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue-router-3.4.9.js"></script>
</head>
<body>
<div id="app">
  <a href="#/login">登录</a>
  <a href="#/register">注册</a>
<!--  使用路由 :确定组件切换后显示的位置-->
  <router-view></router-view>

</div>
<!--引入vue 和vue-router的js文件-->
<!--注意 要先引入vue 再引入vue-router-->

<template id="login-form">
  <div>
    <form action="">
      用户名: <input type="text"> <br>
      密码: <input type="password"> <br>
      <input type="submit" value="登录">
    </form>
  </div>
</template>


<template id="register-form">
  <div>
    <form action="">
      用户名: <input type="text"> <br>
      密码: <input type="password"> <br>
      确认密码: <input type="password"> <br>
      <input type="submit" value="注册">
    </form>
  </div>
</template>


<script>
  //定义组件
  const loginForm = {
    template:"#login-form"
  }

  const registerForm = {
    template: '#register-form'
  }

//3 创建路由对象 定义路由规则
  const router = new VueRouter({

    //定义路由规则
    routes:[
      {name:"login",path:"/login",component:loginForm},
      {name: "register",path: "/register",component: registerForm}
    ]

  })

  //4 在vue 实例中 配置router

  const vm = new Vue({
    el:"#app",
    router:router

  })

</script>

</body>
</html>